<template>
  <el-dialog :title="title" :visible.sync="visible" width="600" center>
    <div class="store-tree">
      <el-scrollbar style="height:100%">
        <el-tree
          v-if="treeData && treeData.length"
          show-checkbox
          :data="treeData"
          default-expand-all
          :props="replaceFields"
          check-strictly
          highlight-current
          node-key="no"
          check-on-click-node
          :expand-on-click-node="false"
          ref="tree"
          @check-change="handleCheckChange"
        >
        </el-tree>
        <div class="no-have" v-else>暂无数据</div>
      </el-scrollbar>
    </div>
    <div slot="footer" style="text-align: right">
      <el-button @click="handleCancel" size="small">取 消</el-button>
      <el-button v-if="treeData && treeData.length" type="primary" @click="handleOk('editFormRef')" size="small"
        >确 定</el-button
      >
    </div>
  </el-dialog>
</template>
<script>
import { getDepartmentInfoList } from '../js/departmentInfo'

export default {
  name: 'DeptTreeModal',
  data () {
    return {
      title: '选择部门',
      visible: false,
      treeData: [],
      replaceFields: {
        children: 'children',
        label: 'deptName',
        value: 'no'
      }
    }
  },
  props: {
    checkDeptInfo: {
      type: Object,
      required: false,
      default: () => {}
    },
    isOnlyShowParent: {
      type: Boolean,
      required: false,
      default: false
    },
    deptLevel: {
      type: Number,
      required: false,
      default: 0
    }
  },
  methods: {
    // 新增
    add () {
      this.visible = true
      this.getDepartmentTree()
    },

    // 查询部门tree
    async getDepartmentTree () {
      let res
      res = await getDepartmentInfoList({ deptLevel: this.deptLevel - 1 })
      console.log(res)

      // if (this.isOnlyShowParent) {
      //   res = await getDeptTree(this.deptLevel)
      // } else {
      //   res = await getDepartmentTree({ key: '' })
      // }
      if (res.code === 0) {
        if (!res.data || res.data.length === 0) return
        this.treeData = res.data.records
        this.setDeptInfo(this.checkDeptInfo)
      } else {
        this.$message.warning(res.msg)
      }
    },

    // 提交表单
    handleOk () {
      const checkDept = this.$refs.tree.getCheckedNodes()[0]
      if (checkDept) {
        const { deptName, no } = checkDept
        this.$emit('deptModalOk', { deptName, no })
      } else {
        this.$emit('deptModalOk', { deptName: '', no: 0 })
      }
      this.handleCancel()
    },

    // 单选设置
    handleCheckChange (data, checked) {
      if (checked) {
        this.$refs.tree.setCheckedKeys([data.no])
        console.log(data)
      }
    },

    // 设置选中项
    setDeptInfo (val) {
      if (Object.keys(val).length) {
        this.$nextTick(() => {
          this.$refs.tree.setCheckedKeys([val.no])
        })
      }
    },

    // 关闭
    handleCancel () {
      this.visible = false
      if (this.treeData && this.treeData.length !== 0) {
        this.$refs.tree.setCheckedKeys([])
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.store-tree {
  box-sizing: border-box;
  border: 1px solid #e8ebee;
  padding: 20px;
  height: 500px;
  /deep/ .el-scrollbar__wrap {
    overflow-x: hidden;
  }
  .no-have {
    width: 100%;
    text-align: center;
    padding-top: 130px;
  }
}
</style>
